<template>
  <div>
    <van-nav-bar
      title="快递单评价"
      right-text="提交"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      v-if="star==0"
    />
     <van-nav-bar title="快递单评价" left-arrow @click-left="onClickLeft" v-if="star==1">
      <template #right>
        <img src="../assets/个人中心/fanhuishouye.png" width="20" alt="" />
      </template>
    </van-nav-bar>
    <div class="title">
      <p>总体评分</p>
      <p><span v-if="star==1">{{toall}}</span> <span v-else>{{zhong}}</span><span>分</span></p>
      <div>
        <img src="../assets/发货单/xiaolian.png" alt="" v-if="zhong>=1"/>
        <img src="../assets/发货单/xiaolian.png" alt="" v-if="zhong>=2"/>
        <img src="../assets/发货单/xiaolian.png" alt="" v-if="zhong>=3"/>
        <img src="../assets/发货单/xiaolian.png" alt="" v-if="zhong>=4"/>
        <img src="../assets/发货单/xiaolian.png" alt="" v-if="zhong>=5"/>
        <img src="../assets/发货单/shangxin.png" alt="" v-for="item in 5-zhong" :key="item"/>
      </div>
    </div>
    <div class="ping">
      <p>店铺评分</p>
      <ul>
        <li>
            <span>店铺评分</span>
          <van-rate
            v-model="value"
            :size="35"
            color="#ffcf60"
            void-icon="star"
            void-color="#eee"
            :readonly="star==1"
          />
        </li>
        <li>
            <span>物流速度</span>
          <van-rate
            v-model="value1"
            :size="35"
            color="#ff8d5b"
            void-icon="star"
            void-color="#eee"
            :readonly="star==1"
          />
        </li>
        <li>
            <span>快递评分</span>
          <van-rate
            v-model="value2"
            :size="35"
            color="#ff5d5e"
            void-icon="star"
            void-color="#eee"
            :readonly="star==1"
          />
        </li>
      </ul>
    </div>
    <div class="bottom">
    <div style="position: relative">
      <textarea
        rows="4"
        class="textarea"
        onfocus="document.getElementById('note').style.display='none'"
        onblur="if(value=='')document.getElementById('note').style.display='block'"
        v-model="comment"
        :disabled='star==1'
      ></textarea>
      <div id="note" class="note" v-show="!star==1">
        <font color="#ccc" 
          >写几句评价</font
        >
      </div>
      <van-uploader v-model="fileList" multiple />
    </div>
    </div>
  </div>
</template>

<script>
import {StarPJ,StarXQ} from '../request/api'
export default {
  data() {
    return {
        //店铺评分
        value:1,
        //物流速度
        value1:3,
        //快递评分
        value2:4,
        //评价
        comment:'',
        //切换是查看界面
        star:'',
        // 订单编号
        orderCode:'',
        //订单id
        id:'',
        //总分
        toall:'',
       fileList: [
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
    };
  },
  created(){
      this.star=this.$route.query.item.star
       //订单id
      this.id=this.$route.query.item.id
       // 订单编号
      this.orderCode=this.$route.query.item.orderCode
    
      StarXQ({
        id:this.id
      }).then(res=>{
        this.toall=res.data.totalScore
         //店铺评分
        this.value=res.data.shop
        //物流速度
        this.value1=res.data.logistics
        //快递评分
        this.value2=res.data.express
        this.comment=res.data.info
        //图片
        // this.fileList=res.data.imgs
        
      })
  },
    computed:{
        zhong:function(){
          let num=parseInt((this.value+this.value1+this.value2)/3)
          return num
        },
    },
  methods: {
    //返回
    onClickLeft() {
        
      this.$router.push("/star");
    },
    //提交
    onClickRight() {
      StarPJ({
         //店铺评分
        shop:this.value,
        //物流速度
        logistics:this.value1,
        //快递评分
        express:this.value2,
        //总分
        totalScore:this.zhong,
        //订单编号
        orderCode:this.orderCode,
        //id
        id:this.id,
        //评价
        info:this.comment
      }).then(res=>{
        
        if (res.errCode==0) {
          this.$router.push('/star')
        }
      })
    },
  },
};
</script>
 
<style lang = "less" scoped>
/deep/ .van-nav-bar__content {
  background: #003399;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon {
    color: #fff;
  }
  .van-nav-bar__right {
    .van-nav-bar__text {
      color: #fff;
    }
  }
}
.title {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  background-color: #fff;
  p {
    text-align: center;
    color: #ccc;
    font-size: 18px;
    padding: 8px 0;
  }
  p:nth-of-type(2) {
    color: #fc3;
    span:nth-of-type(1) {
      font-size: 50px;
    }
  }
  div {
    display: flex;
    justify-content: space-around;
    img {
      width: 35px;
    }
  }
}
.ping {
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
  color: #555; 
  margin-bottom: 10px;
  ul{
      padding: 10px 20px;
      box-sizing: border-box;
     
      li{
          display: flex;
          align-items: center;
          padding: 20px 0;
          span{
              margin-right: 10px;
          }
      }
  }
}
.bottom{
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
    
.textarea {
  border: 0;
  resize: none;
  width: 100%;
  background-color: #fff;
  height: 60px;
  position: relative;
  margin-top: 10px;
  box-sizing: border-box;
}
.note {
  position: absolute;
  top: 0;
  line-height: 20px;
  padding: 14px 5px;
}
}
/deep/.van-uploader__preview-delete{
    width: 16px;
    height: 16px;
    background: url('../assets/发货单/禁止.png') no-repeat;
    border-radius: auto;
    .van-uploader__preview-delete-icon{
        color: transparent;
    }
}

</style>